﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@

@model ManageUsersViewModel

@{
    ViewData["Title"] = "Manage users";
}

<!-- 消息显示区域 -->
@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle"></i> @TempData["SuccessMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

@if (TempData["ErrorMessage"] != null)
{
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle"></i> @TempData["ErrorMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

<h2>@ViewData["Title"]</h2>

<h3>Administrators</h3>

<table class="table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Email</td>
        </tr>
    </thead>

    @if (Model.Administrators != null)
    {
        @foreach (var user in Model.Administrators)
        {
            <tr>
                <td>@user.Id</td>
                <td>@user.Email</td>
            </tr>
        }
    }

</table>

<h3>Everyone</h3>

<table class="table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Email</td>
            <td>Action</td>
        </tr>
    </thead>
    @if (Model.Everyone != null)
    {
        @foreach (var user in Model.Everyone)
        {
            <tr>
                <td>@user.Id</td>
                <td>@user.Email</td>
                <td>
                    @* <div class="btn btn-link"><a href="#" class="link-underline-light">编辑</a></div> *@
                    <button type="button" class="btn btn-link btn-sm text-danger"
                            data-bs-toggle="modal" 
                            data-bs-target="#deleteModal"
                            data-user-id="@user.Id"
                            data-user-email="@user.Email">
                        删除
                    </button>
                    <button type="button" class="btn btn-link btn-sm">编辑</button>
                    @* <button type="button"
                            class="btn btn-danger btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteModal"
                            data-user-id="@user.Id"
                            data-user-email="@user.Email">
                        <i class="fas fa-trash"></i> 删除
                    </button> *@
                </td>
            </tr>
        }
    }
</table>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="deleteModalLabel">确认删除</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除用户 <strong id="deleteUserEmail"></strong> 吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                <form id="deleteForm" method="post" asp-action="DeleteUser">
                    <input type="hidden" name="userId" id="deleteUserId" />
                    <button type="submit" class="btn btn-primary btn-sm">确认</button>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // 初始化删除模态框
        document.addEventListener('DOMContentLoaded', function() {
            const deleteModal = document.getElementById('deleteModal');

            deleteModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const userId = button.getAttribute('data-user-id');
                const userEmail = button.getAttribute('data-user-email');

                document.getElementById('deleteUserEmail').textContent = userEmail;
                document.getElementById('deleteUserId').value = userId;
            });
        });
    </script>
}